<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新闻发布</title>
</head>
<link rel="stylesheet" href="/static/style.css"/>
<script src="/static/jquery.min.js"></script>
<body>
<div class="g-doc">
    <div class="m-tab m-tab-fw m-tab-simple f-cb">
        <h2>内容发布</h2>
    </div>
    <div class="n-public">
        <form class="m-form m-form-ht" id="inputForm" method="post" action="${pageContext.request.contextPath}/insertNews" onsubmit="return false;" autocomplete="off">
            <div class="fmitem">
                <label class="fmlab">标题：</label>
                <div class="fmipt">
                    <input class="u-ipt ipt" id="title" name="title" autofocus placeholder="请输入标题"/>
                </div>
            </div>
            <div class="fmitem">
                <label class="fmlab">图片：</label>
                <div class="fmipt">
                    <input class="u-ipt ipt" id="image" onchange="changeImage()" name="image" placeholder="请输入图片地址"/>
                </div>
            </div>
            <div class="fmitem">
                <label class="fmlab">内容：</label>
                <div class="fmipt">
                    <textarea class="u-ipt" id="content" name="content" rows="10" placeholder="请输入内容"></textarea>
                </div>
            </div>
            <div class="fmitem">
                <label class="fmlab">类型：</label>
                <div class="fmipt" >
                    <select  class="u-ipt price" name="type_id" id="type_id">
                        <option value="0">请选择</option>
                    </select>
                </div>
            </div>
            <div class="fmitem">
                <label class="fmlab">发布人：</label>
                <div class="fmipt">
                    <input  class="u-ipt price" id="issuer" name="issuer" placeholder="请输入发布人"/>
                </div>
            </div>
            <div class="fmitem fmitem-nolab fmitem-btn">
                <div class="fmipt">
                    <button type="submit" onclick="save()" class="u-btn u-btn-primary u-btn-lg">发 布</button>
                </div>
            </div>
        </form>
        <span class="imgpre"><img src="" alt="" id="imgpre"></span>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function (){
        $.post("${pageContext.request.contextPath}/selectType",function (data){
            for (var i =0 ;i < data.data.length; i++){
                $("#type_id").append('<option value="'+data.data[i].id+'">'+data.data[i].name+'</option>')
            }
        })
    })
    //保存
    function save(){
        var title = $("#title").val();
        var image = $("#image").val();
        var content = $("#content").val();
        var type_id = $("#type_id").val();
        var issuer = $("#issuer").val();
        console.log(type_id);
        if (title == "") {
            alert("标题不能为空");
            return false;
        }
        if (image == "") {
            alert("图片地址不能为空");
            return false;
        }
        if (content == "") {
            alert("内容不能为空");
            return false;
        }
        if (type_id == 0) {
            alert("请选择类型");
            return false;
        }
        if (issuer == "") {
            alert("发布人不能为空");
            return false;
        }
        var params = serializeFormToObject($("#inputForm"));
        var url = $("#inputForm").attr("action");//请求URL
        $.post(url,params,function (data){
            if (data.code==200){
                $("#inputForm")[0].reset();
                $("#imgpre").attr('src',"");
            }
            alert(data.msg);
        });
    }
    function changeImage(){
        $("#imgpre").attr('src',$("#image").val());
    }

    //将表单对象序列化成object对象
    function serializeFormToObject(form){
        var o={};
        $.each(form.serializeArray(),function(index){
            if(o[this['name']]){
                o[this['name']] = o[this['name']]+","+this['value'];
            }else{
                o[this['name']] = this['value'];
            }
        });
        return o;
    }
</script>
</html>
